/* ===================================
   POPPINS FONT DECLARATIONS
   =================================== */

/* Poppins Thin (100) */
@font-face {
    font-family: 'Poppins';
    src: url('data/poppins/Poppins-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('data/poppins/Poppins-ThinItalic.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

/* Poppins ExtraLight (200) */
@font-face {
    font-family: 'Poppins';
    src: url('data/poppins/Poppins-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('data/poppins/Poppins-ExtraLightItalic.ttf') format('truetype');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

/* Poppins Light (300) */
@font-face {
    font-family: 'Poppins';
    src: url('data/poppins/Poppins-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('data/poppins/Poppins-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

/* Poppins Regular (400) */
@font-face {
    font-family: 'Poppins';
    src: url('data/poppins/Poppins-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('data/poppins/Poppins-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

/* Poppins Medium (500) */
@font-face {
    font-family: 'Poppins';
    src: url('data/poppins/Poppins-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('data/poppins/Poppins-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

/* Poppins SemiBold (600) */
@font-face {
    font-family: 'Poppins';
    src: url('data/poppins/Poppins-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('data/poppins/Poppins-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

/* Poppins Bold (700) */
@font-face {
    font-family: 'Poppins';
    src: url('data/poppins/Poppins-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('data/poppins/Poppins-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* Poppins ExtraBold (800) */
@font-face {
    font-family: 'Poppins';
    src: url('data/poppins/Poppins-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('data/poppins/Poppins-ExtraBoldItalic.ttf') format('truetype');
    font-weight: 800;
    font-style: italic;
    font-display: swap;
}

/* Poppins Black (900) */
@font-face {
    font-family: 'Poppins';
    src: url('data/poppins/Poppins-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('data/poppins/Poppins-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

/* ===================================
   CSS VARIABLES
   =================================== */

:root {
    --background: #fffbef;
    --ink: #4a4a4a;
    --line: #4a4a4a;
    --field-border: rgba(88, 88, 88, 0.35);
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

body {
    background: var(--background);
    color: var(--ink);
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 48px 48px 28px;
}

.page-tabs {
    margin: -20px 0 26px;
}

.tabs-scroll {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-bottom: 8px;
}

.tab-button {
    flex: 0 0 auto;
    border: 2px solid var(--field-border);
    border-radius: 25px !important;
    background: rgba(255, 255, 255, 0.28);
    color: var(--ink);
    padding: 10px 20px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.1;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tab-button:hover,
.tab-button:focus-visible {
    background: rgba(144, 190, 114, 0.3);
    outline: none;
    border-color: var(--field-border);
}

.tab-button.is-active {
    background: #90be72;
    border-color: #90be72;
    color: white;
    font-weight: 700;
}

.topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
    min-height: 72px;
}

.topbar a {
    text-decoration: none;
    display: inline-block;
    transition: opacity 0.2s ease;
}

.topbar a:hover,
.topbar a:focus {
    opacity: 0.8;
}

.back-home-link {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--ink);
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    transition: color 0.2s ease;
    padding: 8px 12px;
    border-radius: 8px;
}

.back-home-link:hover,
.back-home-link:focus {
    color: #90be72;
    background: rgba(144, 190, 114, 0.1);
}

.back-home-link svg {
    flex-shrink: 0;
}

.logo-durabilite {
    width: auto;
    height: 60px;
}

.logo-commune {
    width: auto;
    height: 60px;
}

.page-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.title-section {
    margin-top: 5px;
}

h1 {
    margin: 0 0 4px;
    font-family: 'Poppins', Georgia, serif;
    font-size: 36px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0;
}

.baseline {
    width: 100%;
    background: var(--line);
}

.baseline-large {
    height: 4px;
}

.baseline-small {
    height: 2px;
}

.subtitle-section {
    margin-top: 24px;
}

h2 {
    margin: 0 0 10px;
    font-family: 'Poppins', sans-serif;
    font-size: 24px;
    line-height: 1.28;
    font-weight: 600;
    letter-spacing: 0;
}

h2 span {
    display: block;
}

.content-section {
    flex: 1;
    padding-top: 24px;
    max-width: 940px;
}

.body-copy {
    font-size: 14px;
    line-height: 1.45;
    font-weight: 400;
}

.body-copy p {
    margin: 0 0 10px;
}

.body-copy ul {
    margin: 0 0 10px 18px;
    padding: 0;
}

.body-copy li {
    margin-bottom: 4px;
}

.footnote {
    font-size: 10px;
    line-height: 1.4;
    font-weight: 300;
    color: rgba(74, 74, 74, 0.85);
}

.intro-copy {
    max-width: 720px;
}

.sustainability-copy {
    max-width: 780px;
}

.two-column-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin-bottom: 14px;
}

.scale-list {
    display: grid;
    gap: 3px;
    margin: 0 0 14px;
}

.scale-list div {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 12px;
}

.section-divider {
    width: calc(100vw - 96px);
    margin: 22px 0 16px;
}

.content-baseline {
    margin-top: 22px;
    max-width: 940px;
}

.stakeholder-matrix-image {
    display: block;
    width: min(420px, 48vw);
    height: auto;
    margin-top: 22px;
    margin-left: auto;
    margin-right: auto;
}

.sustainability-image {
    display: block;
    width: min(315px, 36vw);
    height: auto;
    margin-top: 22px;
    margin-left: auto;
    margin-right: auto;
}

.matrix-section {
    margin-top: 24px;
    margin-bottom: 12px;
}

.matrix-title {
    margin: 0 0 8px;
    font-size: 12px;
    line-height: 1.25;
    font-weight: 400;
    text-align: center;
}

.table-scroll {
    width: calc(100vw - 96px);
    overflow-x: auto;
}

.matrix-table {
    width: 100%;
    min-width: 1320px;
    border-collapse: collapse;
    table-layout: fixed;
    font-family: 'Poppins', sans-serif;
    color: #000;
}

.matrix-table th,
.matrix-table td {
    border: 1px solid rgba(74, 74, 74, 0.45);
    min-height: 44px;
    padding: 6px 8px;
    vertical-align: center;
}

.matrix-table thead th {
    background: #90be72;
    font-size: 10px;
    line-height: 1.15;
    font-weight: 500;
    text-align: center;
}

.matrix-table thead th.is-missing-selection {
    background: #f1a590;
}

.service-display {
    font-size: 10px;
    line-height: 1.15;
    font-weight: 600;
    text-align: center;
}

.service-select {
    width: 100%;
    border: 0;
    background: transparent;
    color: #000;
    font-family: 'Poppins', sans-serif;
    font-size: 10px;
    line-height: 1.15;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
}

.service-select:focus {
    outline: 1px solid #000;
    outline-offset: 2px;
}

.custom-stakeholder-input {
    width: 100%;
    border: 0;
    background: transparent;
    color: #000;
    font-family: 'Poppins', sans-serif;
    font-size: 10px;
    line-height: 1.15;
    font-weight: 600;
    text-align: center;
    cursor: text;
    padding: 2px 4px;
}

.custom-stakeholder-input::placeholder {
    color: #000;
    opacity: 0.7;
}

.custom-stakeholder-input:focus {
    outline: 1px solid #000;
    outline-offset: 2 px;
    background: rgba(255, 255, 255, 0.3);
}

.custom-stakeholder-display {
    font-size: 10px;
    line-height: 1.15;
    font-weight: 600;
    text-align: center;
}

.matrix-table tbody th {
    background: #e5e2df;
    font-size: 10px;
    line-height: 1.2;
    font-weight: 600;
    text-align: left;
}

.matrix-table tfoot th {
    background: #d4d1cc;
    font-size: 10px;
    line-height: 1.2;
    font-weight: 700;
    text-align: left;
}

.matrix-table tfoot td {
    background: rgba(255, 255, 255, 0.35);
    text-align: center;
    vertical-align: middle;
    font-weight: 600;
}

.matrix-table td {
    background: rgba(255, 255, 255, 0.22);
    text-align: center;
    vertical-align: middle;
}

.matrix-table td.calculated-value {
    font-weight: 600;
    color: #2a2a2a;
}

.matrix-table td.negative-value,
.matrix-table tfoot td.negative-value {
    color: #c44536;
}

.matrix-table tfoot td.impact-evaluation {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.matrix-table tfoot td.engagement-level {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.matrix-table th:first-child {
    width: 15%;
    min-width: 198px;
    max-width: 308px;
}

.matrix-table[data-table-id="stakeholder-matrix"] th:first-child {
    width: 110px;
    min-width: 110px;
}

.matrix-table.sustainability-decision-table {
    width: 100%;
    max-width: 770px;
    min-width: 0;
    table-layout: fixed;
}

.matrix-table.sustainability-decision-table th,
.matrix-table.sustainability-decision-table td {
    font-size: 10px;
}

.matrix-table.sustainability-decision-table th:first-child,
.matrix-table.sustainability-decision-table td:first-child {
    width: 22%;
}

.matrix-table.sustainability-decision-table th:nth-child(2),
.matrix-table.sustainability-decision-table td:nth-child(2) {
    width: 58%;
}

.matrix-table.sustainability-decision-table th:last-child,
.matrix-table.sustainability-decision-table td:last-child {
    width: 20%;
    text-align: center;
}

.matrix-checkbox {
    width: 18px;
    height: 18px;
    accent-color: #90be72;
    cursor: pointer;
}

.final-questions-table {
    width: 100%;
    max-width: 770px;
    border-collapse: collapse;
    font-family: 'Poppins', sans-serif;
    color: #000;
}

.final-questions-table th,
.final-questions-table td {
    border: 1px solid rgba(74, 74, 74, 0.45);
    padding: 10px 12px;
    vertical-align: center;
}

.final-questions-table thead th {
    background: #90be72;
    font-size: 10px;
    line-height: 1.15;
    font-weight: 600;
    text-align: center;
}

.final-questions-table thead th:first-child {
    width: 70%;
}

.final-questions-table thead th:last-child {
    width: 10%;
}

.final-questions-table tbody th {
    background: #e5e2df;
    font-size: 10px;
    line-height: 1.2;
    font-weight: 600;
    text-align: left;
}

.final-questions-table td {
    background: rgba(255, 255, 255, 0.22);
    text-align: center;
    vertical-align: middle;
}

.slider-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}

.services-slider {
    width: 100%;
    max-width: 200px;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(144, 190, 114, 0.3);
    outline: none;
    border-radius: 3px;
    cursor: pointer;
}

.services-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: #90be72;
    border-radius: 50%;
    cursor: pointer;
}

.services-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: #90be72;
    border: none;
    border-radius: 50%;
    cursor: pointer;
}

.slider-value {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
}

.image-section {
    flex: 1;
    display: grid;
    place-items: center;
    padding: 40px 0 54px;
}

.main-icon {
    width: min(420px, 48vw);
    height: auto;
}

.project-footer {
    margin-top: auto;
}

.matrix-footer {
    margin-top: 12px;
}

.blank-page-body {
    flex: 1;
    display: grid;
    align-items: start;
    padding-top: 48px;
}

.blank-page-body p {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: rgba(63, 63, 63, 0.55);
}

.project-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 24px;
    padding: 8px 0 8px;
    align-items: center;
}

.print-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: var(--ink);
    font-size: 32px;
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease;
    opacity: 0.7;
}

.print-button:hover,
.print-button:focus-visible {
    opacity: 1;
    transform: scale(1.1);
    outline: 2px solid var(--line);
    outline-offset: 4px;
    border-radius: 4px;
}

.print-button:active {
    transform: scale(0.95);
}

@media print {
    @page {
        size: A4 landscape;
        margin: 0;
    }
    
    /* Forcer l'impression des couleurs de fond */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
    }
    
    body {
        background: var(--background) !important;
    }
    
    .page-tabs,
    .print-button {
        display: none !important;
    }
    
    .page {
        padding: 0;
        min-height: auto;
    }
    
    .print-all-pages {
        display: block !important;
    }
    
    .print-page-wrapper {
        position: relative;
        min-height: 100vh;
        page-break-after: always;
        page-break-inside: avoid;
        display: flex;
        flex-direction: column;
        padding: 0.7cm 1cm 0.5cm 1cm;
        background: var(--background) !important;
        box-sizing: border-box;
    }
    
    .print-page-wrapper:last-child {
        page-break-after: auto;
    }
    
    .print-page-wrapper .page-content {
        flex: 1 0 auto;
        display: flex;
        flex-direction: column;
    }
    
    .print-page-wrapper .content-section {
        flex: 1 0 auto;
    }
    
    .print-page-wrapper .topbar {
        flex-shrink: 0;
    }
    
    .print-footer {
        margin-top: auto;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }
    
    .project-footer {
        margin-top: auto;
        flex-shrink: 0;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }
    
    .project-fields {
        padding: 4px 0;
        gap: 16px;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }
    
    .baseline {
        background: var(--line) !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }
    
    .baseline-large {
        height: 3px;
    }
    
    .baseline-small {
        height: 2px;
    }
    
    .topbar {
        margin-bottom: 0.3cm;
    }
    
    .title-section {
        margin-top: 0;
        margin-bottom: 0.25cm;
    }
    
    h1 {
        font-size: 36px;
        margin-bottom: 2px;
    }
    
    h2 {
        font-size: 24px;
        margin-bottom: 6px;
    }
    
    h3 {
        font-size: 18px;
        margin-bottom: 4px;
    }
    
    .body-copy {
        font-size: 10px;
        line-height: 1.3;
    }
    
    .body-copy p {
        margin: 0 0 6px;
    }
    
    .body-copy ul {
        margin: 0 0 6px 14px;
    }
    
    .body-copy li {
        margin-bottom: 2px;
    }
    
    .footnote {
        font-size: 8px;
        line-height: 1.3;
    }
    
    .table-scroll {
        width: 100%;
        overflow: visible;
    }
    
    .matrix-table:not(.sustainability-decision-table) {
        min-width: auto;
        width: 100%;
        font-size: 7px;
        table-layout: fixed;
    }
    
    /* Forcer la première colonne à une largeur fixe */
    .matrix-table:not(.sustainability-decision-table) th:first-child,
    .matrix-table:not(.sustainability-decision-table) td:first-child {
        width: 180px;
    }
    
    /* Toutes les autres colonnes partagent l'espace restant équitablement */
    .matrix-table:not(.sustainability-decision-table) th:not(:first-child),
    .matrix-table:not(.sustainability-decision-table) td:not(:first-child) {
        width: auto;
    }
    
    .final-questions-table {
        width: auto;
        max-width: 700px;
    }
    
    .matrix-table th,
    .matrix-table td {
        padding: 2px 3px;
        min-height: auto;
    }
    
    .matrix-table[data-table-id="stakeholder-matrix"] th:first-child {
        width: 100px !important;
    }
    
    .matrix-table thead th {
        font-size: 8px;
        background: #90be72 !important;
        color: #000 !important;
    }
    
    .matrix-table thead th.is-missing-selection {
        background: #f1a590 !important;
    }
    
    .matrix-table tbody th {
        font-size: 8px;
        background: #e5e2df !important;
        color: #000 !important;
    }
    
    .matrix-table tfoot th {
        font-size: 8px;
        background: #d4d1cc !important;
        color: #000 !important;
    }
    
    .matrix-table tfoot td {
        background: rgba(255, 255, 255, 0.35) !important;
    }
    
    .matrix-table td {
        background: rgba(255, 255, 255, 0.22) !important;
    }
    
    .final-questions-table thead th {
        background: #90be72 !important;
        color: #000 !important;
    }
    
    .final-questions-table tbody th {
        background: #e5e2df !important;
        color: #000 !important;
    }
    
    .final-questions-table td {
        background: rgba(255, 255, 255, 0.22) !important;
    }
    
    .baseline {
        background: var(--line) !important;
    }
    
    .final-questions-table {
        width: auto;
        max-width: 700px;
        font-size: 8px;
    }
    
    .final-questions-table th,
    .final-questions-table td {
        padding: 6px 8px;
    }
    
    .project-cell {
        border: 1px solid var(--field-border) !important;
        background: white !important;
        color: var(--ink) !important;
        font-size: 9px;
        min-height: 24px;
        padding: 4px 8px;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    
    .project-cell[readonly] {
        border-color: transparent !important;
        background: transparent !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    
    .project-cell[readonly].align-right {
        text-align: right !important;
    }
    
    .project-cell.align-right {
        text-align: right !important;
    }
    
    input[name="project-managers"] {
        text-align: right !important;
        direction: ltr !important;
    }
    
    .project-cell[name="project-managers"] {
        text-align: right !important;
        direction: ltr !important;
    }
    
    .project-cell-print {
        display: block !important;
        border: none !important;
        background: transparent !important;
        font-size: 9px !important;
        min-height: 24px !important;
        padding: 4px 8px !important;
        line-height: 1.2 !important;
        color: var(--ink) !important;
    }
    
    .project-cell-print.align-right {
        text-align: right !important;
        direction: ltr !important;
    }
    
    /* Force l'alignement à droite pour project-managers en print */
    .project-cell-print[data-field="project-managers"],
    [name="project-managers"].project-cell-print {
        text-align: right !important;
        direction: ltr !important;
    }
    
    .force-align-right {
        text-align: right !important;
        direction: ltr !important;
    }
    
    .matrix-table.sustainability-decision-table {
        width: auto;
        max-width: 550px;
        table-layout: fixed;
    }
    
    .matrix-table.sustainability-decision-table th,
    .matrix-table.sustainability-decision-table td {
        font-size: 8px;
    }
    
    .matrix-table.sustainability-decision-table th:first-child,
    .matrix-table.sustainability-decision-table td:first-child {
        width: 22%;
    }
    
    .matrix-table.sustainability-decision-table th:nth-child(2),
    .matrix-table.sustainability-decision-table td:nth-child(2) {
        width: 58%;
    }
    
    .matrix-table.sustainability-decision-table th:last-child,
    .matrix-table.sustainability-decision-table td:last-child {
        width: 20%;
        text-align: center;
    }
    
    .section-divider {
        width: 100%;
        margin: 0.2cm 0;
    }
    
    .content-baseline {
        margin-top: 0.5cm;
    }
    
    .matrix-section {
        margin-top: 0.2cm;
        margin-bottom: 0.2cm;
        max-height: calc(100vh - 6cm);
        overflow: hidden;
    }
    
    .matrix-title {
        font-size: 10px;
        margin-bottom: 6px;
    }
    
    /* Styles pour les checkmarks imprimés */
    .print-checkmark {
        display: inline-block !important;
        font-size: 16px !important;
        font-weight: bold !important;
        color: #90be72 !important;
        line-height: 1 !important;
        visibility: visible !important;
    }
    
    /* Masquer les vrais checkboxes à l'impression */
    input[type="checkbox"],
    .matrix-checkbox {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* Masquer les sliders à l'impression */
    input[type="range"],
    .services-slider {
        display: none;
    }
    
    /* Masquer les sélecteurs de services et afficher leur valeur */
    .service-select {
        border: none !important;
        background: transparent !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
        color: #000 !important;
        font-size: 8px !important;
        padding: 0 !important;
        pointer-events: none;
    }
    
    /* Cacher les options non sélectionnées */
    .service-select option:not(:checked) {
        display: none;
    }
    
    /* Masquer le champ input personnalité et afficher sa valeur*/
    .custom-stakeholder-input {
        border: none !important;
        background: transparent !important;
        color: #000 !important;
        font-size: 8px !important;
        padding: 0 !important;
        pointer-events: none;
    }
    
    .custom-stakeholder-display {
        font-size: 8px !important;
        font-weight: 600 !important;
        text-align: center !important;
    }
    
    /* S'assurer que les valeurs calculées sont visibles */
    .calculated-value {
        font-weight: 600 !important;
        color: #2a2a2a !important;
    }
    
    .negative-value {
        color: #c44536 !important;
    }
    
    .impact-evaluation,
    .engagement-level {
        font-size: 8px !important;
        font-weight: 700 !important;
        text-transform: uppercase;
    }
    
    /* Ajuster les images pour l'impression */
    .stakeholder-matrix-image,
    .main-icon {
        max-width: 300px;
        height: auto;
        margin: 0.3cm auto;
        display: block;
    }
    
    .sustainability-image {
        max-width: 240px;
        height: auto;
        margin: 0.2cm auto;
        display: block;
    }
    
    .logo-durabilite,
    .logo-commune{
        max-height: 40px;
        width: auto;
    }
    
    /* S'assurer que le contenu tient sur une page */
    .subtitle-section {
        margin-top: 0.3cm;
    }
    
    .image-section {
        padding: 0.3cm 0;
    }
    
    .scale-list {
        margin: 0 0 8px;
        gap: 2px;
    }
    
    .two-column-intro {
        gap: 12px;
        margin-bottom: 8px;
    }
    
    .slider-value {
        font-size: 12px !important;
        font-weight: 700 !important;
    }
}

.project-cell {
    display: block;
    width: 100%;
    min-height: 46px;
    border: 1px solid var(--field-border);
    background: rgba(255, 255, 255, 0.35);
    color: var(--ink);
    padding: 8px 10px;
    font-family: 'Poppins', sans-serif;
    font-size: 10px;
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: 0;
}

.project-cell::placeholder {
    color: var(--ink);
    opacity: 1;
}

.project-cell:focus {
    outline: 2px solid var(--line);
    outline-offset: 2px;
}

.project-cell[readonly] {
    border-color: transparent;
    background: transparent;
    cursor: default;
}

.project-cell[readonly]:focus {
    outline: none;
}

.project-cell[readonly].align-right,
.project-cell.align-right,
input[name="project-managers"],
.project-cell[readonly][name="project-managers"] {
    text-align: right;
}

/* Force l'alignement à droite pour tout élément avec l'attribut name="project-managers" */
[name="project-managers"],
*[data-field="project-managers"] {
    text-align: right !important;
}

.print-checkmark {
    font-size: 16px;
    font-weight: bold;
    color: #90be72;
    display: inline-block;
    line-height: 1;
}

@media (max-width: 720px) {
    .page {
        padding: 28px 22px 22px;
    }

    .page-tabs {
        margin-top: -8px;
    }

    .tab-button {
        font-size: 13px;
        padding: 8px 10px;
    }

    .topbar {
        min-height: 56px;
    }

    .logo-durabilite{
        width: 118px;
    }

    .logo-ecublens {
        width: 118px;
    }

    h1 {
        font-size: 36px;
    }

    h2 {
        font-size: 24px;
    }

    .main-icon {
        width: min(330px, 72vw);
    }

    .project-fields {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .print-button {
        width: 100%;
        height: 48px;
    }

    .section-divider {
        width: calc(100vw - 44px);
    }

    .table-scroll {
        width: calc(100vw - 44px);
    }

    .align-right {
        text-align: left;
    }
    
    /* Garder l'alignement à droite pour le champ project-cell */
    .project-cell.align-right {
        text-align: right;
    }
    
    .two-column-intro {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}

/* ===================================
   STYLES ORIENTATION SIMPLIFIÉE
   =================================== */

.test-question {
    margin-bottom: 32px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.35);
    border: 1px solid var(--field-border);
    border-radius: 8px;
}

.test-options {
    display: flex;
    gap: 16px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.test-option {
    flex: 1;
    min-width: 150px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.5);
    border: 2px solid var(--field-border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 500;
}

.test-option:hover {
    background: rgba(144, 190, 114, 0.2);
    border-color: #90be72;
}

.test-option input[type="radio"] {
    width: 20px;
    height: 20px;
    accent-color: #90be72;
    cursor: pointer;
}

.test-option input[type="radio"]:checked + span {
    font-weight: 700;
    color: #90be72;
}

.test-option:has(input:checked) {
    background: rgba(144, 190, 114, 0.3);
    border-color: #90be72;
}

.synthese-score {
    text-align: center;
    padding: 24px;
    background: rgba(144, 190, 114, 0.2);
    border-radius: 12px;
    margin-bottom: 24px;
}

.synthese-score h2 {
    margin: 0;
    font-size: 24px;
}

.synthese-score span {
    color: #90be72;
    font-weight: 700;
}

.recommendation-box {
    padding: 24px;
    border-radius: 12px;
    margin: 24px 0;
    border: 3px solid;
}

.recommendation-box.low {
    background: rgba(200, 200, 200, 0.2);
    border-color: #888;
}

.recommendation-box.medium {
    background: rgba(255, 165, 0, 0.1);
    border-color: #FFA500;
}

.recommendation-box.high {
    background: rgba(144, 190, 114, 0.2);
    border-color: #90be72;
}

.recommendation-box h3 {
    margin-top: 0;
    font-size: 20px;
}

@media (max-width: 768px) {
    .test-options {
        flex-direction: column;
    }
    
    .test-option {
        min-width: 100%;
    }
}

/* ===================================
   STYLES PAGE D'ACCUEIL (INDEX)
   =================================== */

.landing-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 48px 64px;
    max-width: 1400px;
    margin: 0 auto;
}

.landing-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
}

.language-selector {
    position: relative;
    display: inline-block;
}

.lang-select {
    padding: 10px 40px 10px 16px;
    border: 2px solid var(--field-border);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.28);
    color: var(--ink);
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%234a4a4a' d='M1.41 0L6 4.59L10.59 0L12 1.41l-6 6l-6-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    transition: all 0.2s ease;
}

.lang-select:hover,
.lang-select:focus {
    background-color: rgba(144, 190, 114, 0.15);
    border-color: #90be72;
    outline: none;
}

.lang-select option {
    background: var(--background);
    color: var(--ink);
    padding: 10px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
}

.landing-header a {
    text-decoration: none;
    display: inline-block;
    transition: opacity 0.2s ease;
}

.landing-header a:hover,
.landing-header a:focus {
    opacity: 0.8;
}

.hero-section {
    text-align: left;
    margin-bottom: 48px;
}

.hero-section h1 {
    margin: 0 0 12px;
    font-family: 'Poppins', Georgia, serif;
    font-size: 36px;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--ink);
}

.subtitle {
    margin: 0 0 16px;
    font-family: 'Poppins', sans-serif;
    font-size: 24px;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--ink);
}

.intro-text {
    max-width: 900px;
    font-size: 14px;
    line-height: 1.6;
    font-weight: 400;
}

h3 {
    margin: 0 0 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--ink);
}

.intro-text p {
    margin: 0;
}

.tools-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    margin-bottom: 48px;
}

.tool-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 32px 20px;
    background: rgba(255, 255, 255, 0.35);
    border: 2px solid rgba(88, 88, 88, 0.25);
    border-radius: 12px;
    text-decoration: none;
    color: var(--ink);
    transition: all 0.3s ease;
}

.tool-card:hover,
.tool-card:focus {
    background: rgba(144, 190, 114, 0.15);
    border-color: #90be72;
    transform: translateY(-4px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.tool-icon {
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.tool-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.tool-icon img[src*="boussole21.ch"] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    max-width: 120px;
    max-height: 120px;
}

.tool-card h3 {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    line-height: 1.3;
    font-weight: 600;
    color: var(--ink);
}

.landing-footer {
    margin-top: auto;
    text-align: left;
    padding-top: 24px;
}

.landing-footer p {
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
    color: var(--ink);
}

.landing-footer a {
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--ink);
    transition: color 0.2s ease, border-color 0.2s ease;
}

.landing-footer a:hover,
.landing-footer a:focus {
    color: #90be72;
    border-bottom-color: #90be72;
}

/* Responsive page d'accueil */
@media (max-width: 1024px) {
    .tools-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

@media (max-width: 768px) {
    .landing-page {
        padding: 32px 24px;
    }

    .logo-durabilite {
        width: 80px;
    }

    .hero-section h1 {
        font-size: 36px;
    }

    .subtitle {
        font-size: 20px;
    }

    .intro-text {
        font-size: 14px;
    }

    .tools-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .tool-icon {
        width: 100px;
        height: 100px;
    }

    .tool-card h3 {
        font-size: 14px;
    }
    
    /* Responsive pour le sélecteur de langue */
    .landing-header {
        flex-direction: column;
        gap: 20px;
        align-items: center;
    }
    
    .language-selector {
        width: 100%;
        max-width: 300px;
    }
    
    .lang-select {
        width: 100%;
    }
}